<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>合拍街</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../css/find.css" rel="stylesheet" type="text/css"/>
    <link href="../iconfont/iconfont.css" rel="stylesheet" type="text/css"/>
    <style>
        .top-nav li {
            padding: 0 20px;
            box-sizing: border-box;
            border-right: 1px solid #eeeeee;
        }

        .top-nav li:last-of-type {
            border-right: none;
        }

        .wrap .doliage-position {
            padding: 15px;
            border-radius: 5px;
        }

        .wrap .doliage-type {
            padding: 15px;
            border-radius: 5px;
        }

        .wrap .select {
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            margin-top: 20px;
        }

        .w33 {
            width: 33.3%;
            padding: 5px 0;
            box-sizing: border-box;
            text-align: center;
        }

        .more {
            text-align: center;
            margin: 20px 0;
        }

        .more a {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .find-list {
            background-color: #FFFFFF;
        }

        .find-list a {
            color: #fff;
        }
    </style>
</head>

<body>
<header id="header">
    <a href="../index.html" class="iconfont fl">&#xe63f;</a>
    <div class="title">发现</div>
    <a href="#" class="iconfont fr">&#xe6a0;</a>
</header>
<div class="content find_list">
    <div class="wrap">
        <div class="dialog dialog-local" style="top: -1px">
            <div class="dialog-card">
                <div class="dialog-title">
                    选择地区<span class="fr close"></span>
                </div>
                <div class="dialog-select">
                    <ul class="clearfix">
                        <li class="fl w33">
                            <a href="javascript:selectLocal('全部')">全部</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('北京')">北京</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('上海')">上海</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('杭州')">杭州</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('苏州')">苏州</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('南京')">南京</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('广州')">广州</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('西安')">西安</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('重庆')">重庆</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('深圳')">深圳</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('武汉')">武汉</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('青岛')">青岛</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('哈尔滨')">哈尔滨</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('福建')">福建</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('厦门')">厦门</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('香港')">香港</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('澳门')">澳门</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectLocal('台湾')">台湾</a>
                        </li>
                    </ul>
                </div>
                <div class="dialog-more">
                    <a href="">更多地区
                        <i class="iconfont"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="dialog dialog-type" style="top: -1px">
            <div class="dialog-card">
                <div class="dialog-title">
                    选择分类<span class="fr close"></span>
                </div>
                <div class="dialog-select">
                    <ul class="clearfix">
                        <li class="fl w33">
                            <a href="javascript:selectType('全部')">全部</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectType('景区')">景区</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectType('室内')">室内</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectType('郊区')">郊区</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectType('商场')">商场</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectType('公园')">公园</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectType('游乐场')">游乐场</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectType('工厂')">工厂</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectType('图书馆')">图书馆</a>
                        </li>
                        <li class="fl w33">
                            <a href="javascript:selectType('其它')">其它</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="top-nav">
            <ul class="clearfix">
                <li>
                    <span id="location">
                        地区
                        <i class="iconfont fr"></i>
                    </span>
                </li>
                <li>
                    <span id="type">
                        分类
                        <i class="iconfont fr"></i>
                    </span>
                </li>
            </ul>
        </div>
        <div class="find-list">
            <div class="clearfix photoLocation">
                <div class="fl"><img src="../skin/xhdpi/garden.png" alt="">地区拍摄地点</div>
                <div class="fr" id="share">
                    <a href="found.html">+分享拍摄地点</a>
                </div>
            </div>
            <ul class="clearfix">
                <li>
                    <a href="detail.html" class="clearfix">
                        <div class="fl find-img">
                            <img src="../images/img1.jpg" alt="">
                        </div>
                        <div class="fr find-info">
                            <p>
                                <span class="info-title">三段锦商业影棚</span>
                                <span>北京朝阳</span>
                            </p>
                            <p>拍摄美妆片</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="detail.html" class="clearfix">
                        <div class="fl find-img">
                            <img src="../images/img2.jpg" alt="">
                        </div>
                        <div class="fr find-info">
                            <p>
                                <span class="info-title">城中草原赛罕塔拉</span>
                                <span>内蒙古包头</span>
                            </p>
                            <p>这是包头最大的一块城中草原，目前也是全国唯一一个城中草原。</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="detail.html" class="clearfix">
                        <div class="fl find-img">
                            <img src="../images/img3.jpg" alt="">
                        </div>
                        <div class="fr find-info">
                            <p>
                                <span class="info-title">天津文化中心</span>
                                <span>天津河东</span>
                            </p>
                            <p>室内，设计感超强，大片白墙</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="detail.html" class="clearfix">
                        <div class="fl find-img">
                            <img src="../images/img5.jpg" alt="">
                        </div>
                        <div class="fr find-info">
                            <p>
                                <span class="info-title">九溪烟村</span>
                                <span>浙江杭州</span>
                            </p>
                            <p>烟雾缭绕，景色别致，茶园是个不错的拍摄地点。</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="detail.html" class="clearfix">
                        <div class="fl find-img">
                            <img src="../images/img5.jpg" alt="">
                        </div>
                        <div class="fr find-info">
                            <p>
                                <span class="info-title">九溪烟村</span>
                                <span>浙江杭州</span>
                            </p>
                            <p>烟雾缭绕，景色别致，茶园是个不错的拍摄地点。</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<footer id="footer" class="foot">
    <ul>
        <li>
            <a class="home" href="../index.html">
                <p>首页</p>
            </a>
        </li>
        <li class="active">
            <a class="find" href="index.html">
                <p>发现</p>
            </a>
        </li>
        <li>
            <a class="camera" href="../ranking/index.html">
                <p>合拍榜</p>
            </a>
        </li>
        <li>
            <a class="person" href="../user/user_login.html">
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
</body>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>

    function selectLocal(local) {
        $("#location").html(local);
        $(".isshow").removeClass('isshow');
    }

    function selectType(type) {
        $("#type").html(type);
        $(".isshow").removeClass('isshow');
    }

    $(function () {
        var $location = $('#location');
        $location.on('click', function () {
            $(".dialog-local").toggleClass('isshow');
        });

        var $remove = $(".close");
        $remove.on('click', function () {
            $(".isshow").removeClass('isshow');
        });

        var $type = $('#type');
        $type.on('click', function () {
            $(".dialog-type").toggleClass('isshow');
        });
    })
</script>

</html>